<template>
	<view class="container">
		<!-- 页面标题 -->
		
		
		<!-- 搜索框 -->
		<view class="search-container">
			<input 
				class="search-input" 
				placeholder="搜索学校名称..." 
				v-model="searchKeyword"
				@input="handleSearch"
			/>
			<text class="search-icon">&#128269;</text>
		</view>
		
		<!-- 学校选择器 -->
		<view class="selector-container">
			<!-- 省份选择 -->
			<picker class="picker" @change="onProvinceChange" :value="selectedProvinceIndex" :range="provinces">
				<view class="picker-display">
					<text>{{ selectedProvince || '请选择省份' }}</text>
					<text class="arrow-icon">▼</text>
				</view>
			</picker>
			
			<!-- 城市选择 -->
			<picker class="picker" @change="onCityChange" :value="selectedCityIndex" :range="cities">
				<view class="picker-display">
					<text>{{ selectedCity || '请选择城市' }}</text>
					<text class="arrow-icon">▼</text>
				</view>
			</picker>
		</view>
		
		<!-- 学校列表 -->
		<scroll-view class="school-list" scroll-y="true">
			<view 
				class="school-item" 
				v-for="(school, index) in filteredSchools" 
				:key="index"
				@click="selectSchool(school)"
			>
				<view class="school-info">
					<text class="school-name">{{ school.name }}</text>
					<text class="school-location">{{ school.province }} - {{ school.city }}</text>
				</view>
				<view class="check-icon" :class="{ selected: selectedSchool === school.name }">
					{{ selectedSchool === school.name ? '✓' : '' }}
				</view>
			</view>
			
			<!-- 无结果提示 -->
			<view v-if="filteredSchools.length === 0 && searchKeyword" class="no-results">
				<text>未找到相关学校</text>
			</view>
		</scroll-view>
		
		<!-- 确认按钮 -->
		<view class="confirm-button" @click="confirmSwitch" :class="{ disabled: !selectedSchool }">
			<text class="button-text">确认切换</text>
		</view>
	</view>
</template>

<script>
	// 导入学校数据
	import schoolData from './schools.json';
	
	export default {
		data() {
			return {
				// 搜索关键词
				searchKeyword: '',
				// 所有学校数据
				allSchools: [],
				// 筛选后的学校列表
				filteredSchools: [],
				// 省份列表
				provinces: [],
				// 城市列表
				cities: [],
				// 选中的省份
				selectedProvince: '',
				// 选中的城市
				selectedCity: '',
				// 选中的学校
				selectedSchool: '',
				// 选中的省份索引
				selectedProvinceIndex: 0,
				// 选中的城市索引
				selectedCityIndex: 0
			}
		},
		created() {
			// 初始化数据
			this.initData();
		},
		methods: {
			// 初始化数据
			initData() {
				// 加载所有学校数据
				this.allSchools = schoolData;
				this.filteredSchools = [...this.allSchools];
				
				// 提取所有省份
				const provinceSet = new Set();
				this.allSchools.forEach(school => {
					provinceSet.add(school.province);
				});
				this.provinces = ['全部省份', ...Array.from(provinceSet)];
				
				// 默认选中第一个省份
				this.selectedProvince = this.provinces[0];
				
				// 提取城市列表
				this.updateCities();
			},
			
			// 更新城市列表
			updateCities() {
				const citySet = new Set();
				if (this.selectedProvince === '全部省份') {
					// 如果选择全部省份，显示所有城市
					this.allSchools.forEach(school => {
						citySet.add(school.city);
					});
				} else {
					// 根据选中的省份筛选城市
					this.allSchools.forEach(school => {
						if (school.province === this.selectedProvince) {
							citySet.add(school.city);
						}
					});
				}
				this.cities = ['全部城市', ...Array.from(citySet)];
				this.selectedCity = this.cities[0];
			},
			
			// 省份选择变化
			onProvinceChange(e) {
				this.selectedProvinceIndex = e.detail.value;
				this.selectedProvince = this.provinces[this.selectedProvinceIndex];
				this.selectedCityIndex = 0;
				this.updateCities();
				this.filterSchools();
			},
			
			// 城市选择变化
			onCityChange(e) {
				this.selectedCityIndex = e.detail.value;
				this.selectedCity = this.cities[this.selectedCityIndex];
				this.filterSchools();
			},
			
			// 搜索处理
			handleSearch() {
				this.filterSchools();
			},
			
			// 筛选学校
			filterSchools() {
				// 根据搜索关键词、省份和城市筛选学校
				this.filteredSchools = this.allSchools.filter(school => {
					// 检查搜索关键词
					const keywordMatch = this.searchKeyword ? 
						school.name.toLowerCase().includes(this.searchKeyword.toLowerCase()) : 
						true;
					
					// 检查省份
					const provinceMatch = this.selectedProvince === '全部省份' || 
						school.province === this.selectedProvince;
					
					// 检查城市
					const cityMatch = this.selectedCity === '全部城市' || 
						school.city === this.selectedCity;
					
					return keywordMatch && provinceMatch && cityMatch;
				});
			},
			
			// 选择学校
			selectSchool(school) {
				this.selectedSchool = school.name;
			},
			
			// 确认切换
			confirmSwitch() {
				if (!this.selectedSchool) {
					uni.showToast({
						title: '请先选择学校',
						icon: 'none'
					});
					return;
				}
				
				uni.showModal({
					title: '确认切换',
					content: `确定要切换到 ${this.selectedSchool} 吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: `已切换到${this.selectedSchool}`,
								icon: 'success'
							});
							
							// 模拟切换学校操作，实际项目中可能需要调用API
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 88rpx;
	background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
}

.search-container {
	position: relative;
	padding: 20rpx;
	background-color: #fff;
}

.search-input {
	width: 100%;
	height: 70rpx;
	padding: 0 20rpx 0 60rpx;
	background-color: #f5f5f5;
	border-radius: 35rpx;
	font-size: 28rpx;
}

.search-icon {
	position: absolute;
	left: 40rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 32rpx;
	color: #999;
}

.selector-container {
	display: flex;
	flex-direction: row;
	padding: 20rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.picker {
	flex: 1;
	margin: 0 10rpx;
}

.picker-display {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 70rpx;
	padding: 0 20rpx;
	background-color: #f5f5f5;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: #333;
}

.arrow-icon {
	color: #999;
	font-size: 24rpx;
}

.school-list {
	flex: 1;
	padding: 0 20rpx;
}

.school-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.school-info {
	display: flex;
	flex-direction: column;
}

.school-name {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.school-location {
	font-size: 26rpx;
	color: #999;
}

.check-icon {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	border: 2rpx solid #007AFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #007AFF;
}

.check-icon.selected {
	background-color: #007AFF;
	color: #fff;
}

.no-results {
	text-align: center;
	padding: 40rpx;
	color: #999;
	font-size: 28rpx;
}

.confirm-button {
	margin: 20rpx;
	height: 80rpx;
	background: linear-gradient(135deg, #007AFF 0%, #00BFFF 100%);
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.confirm-button.disabled {
	background: #ccc;
}

.button-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}
</style>